<template>
	<uni-popup type="bottom" ref="cou_pop" @change="closePop">
	<view class="pop_wrap" :style="{backgroundImage: styleStr()}">

		<view class="pop_box">
			<view class="top">
				<image :src="iconurl +'/static/newImg/back.png'" mode="aspectFill" class="img" @click="toback"></image>
				<image :src="iconurl +'/static/newImg/cancle.png'" mode="aspectFill" class="icon" @click="toback"></image>
			</view>


			<!-- <view class="border">
				<image src="/static/newImg/border.png" mode="aspectFill"></image>
			</view> -->
			
			<view class="but_box" v-if="!emptyShow">
				<button class="openNew" @click="toback">完成</button>
				<!-- <image src="/static/newImg/openPay.png" mode="aspectFill" @click='openBox' class="openNew"></image> -->
			</view>


			<scroll-view class="swiper_box" scroll-y>
				<template v-if="emptyShow">
					<view class="empty_box">
						暂无优惠券
					</view>
				</template>
				<template v-else>
					<view class="pop_center" v-if="!useList.length">
						<view class="pop_title">
							可使用
						</view>
						<u-radio-group @change="radioGroupChange">
							<u-radio @change="radioChange(item)" v-for="(item, index) in successList" :key="index"
								:name="item.user_coupon_id" wrap>
								<view class="pop_item">
									<view class="item_box">
										<view class="top">
											<view class="money" v-if="item.price != ''">
												¥{{item.sub_price}}
											</view>
											<view class="">
												<view class="use">
													{{item.name}}
												</view>
												<!-- <view class="use">
													{{item.title}}
												</view> -->
											</view>
										
										</view>
										<view class="time">
											{{item.begin_time}}-{{item.end_time}}
										</view>
									</view>
								</view>
							</u-radio>
						</u-radio-group>
					</view>

				<!-- 	<view class="pop_center" v-if="!useList.length">
						<view class="pop_title">
							不可使用
						</view>
						<view class="pop_item " v-for="(item,index) in useList" :key="index"
							style="background: linear-gradient(135deg, #14264C, #203D73, #2452AE, #0C2F5D, #021422);opacity: 0.3;">
							<view class="item_box">
								<view class="top">
									<view class="money">
										¥{{item.sub_price}}
									</view>
									<view class="">
										<view class="use">
											{{item.min_price_desc}}
										</view>
										<view class="use">
											{{item.title}}
										</view>
									</view>
								</view>
								<view class="time">
									{{item.begin_time}}-{{item.end_time}}
								</view>
							</view>
							<image src="/static/newImg/no.png" mode="aspectFill"></image>
						</view>
					</view> -->


				
				</template>

			</scroll-view>
		</view>



	</view>
	</uni-popup>
</template>

<script>
	export default {
		props: ['boxid','beishu'],
		data() {
			return {
				coupin_id: '',
				show: false,
				successList: [],
				useList: [],
				xuanzhong: '',
				emptyShow: false,
				iconurl: this.$configs.urls,
			}
		},
		mounted() {
			this.open()
			this.getlist()
		},
		destroyed() {
			this.toback();
		},
		methods: {
			styleStr(){
				return `url(${this.iconurl}/static/newImg/popBg.png)`
			},
			open() {
				this.$refs.cou_pop.open();
			},
			closePop(e){
				const { show } = e
				if(show === false) {
					// this.$refs.cou_pop.close();
				this.$parent.youhuiShow = false
				}
			},
			getlist() {
				let data = {
					type:this.beishu,//倍数
					box_id:this.boxid
				}  
				////console.log('data',data)
				this.$Request.get(this.$api.user.boxCouponList, data).then(res => {
					////console.log('dasasasasasas',res)
					if (res.data.length == 0) {
							this.emptyShow = true
							return
						}
					this.successList = res.data
				})
				// this.$Request.get(this.$api.user.cardList).then(res => {
				// 	////console.log('res,',res)
				// 	if (res.data.list.length == 0) {
				// 		this.emptyShow = true
				// 		////console.log('this.emptyShow1111111,',this.emptyShow)
				// 		return
				// 	}
				// 	////console.log('this.emptyShow,',this.emptyShow)
				// 	this.successList = []
				// 	this.useList = []
				// 	if(res.code == 0){
				// 		for (let i = 0; i <= res.data.list.length; i++) {
				// 			let text = res.data.list && res.data.list[i].status_str
				// 			if ( text == '待使用') {
				// 				let successList = {
				// 					sub_price: res.data.list[i].sub_price,
				// 					min_price_desc: res.data.list[i].text,
				// 					begin_time: res.data.list[i].begin_time,
				// 					title: res.data.list[i].begin_time,
				// 					end_time: res.data.list[i].end_time,
				// 					image: '/static/newImg/weixuan.png',
				// 					user_coupon_id: res.data.list[i].id,
				// 				}
				// 				this.successList.push(successList)
				// 			} else {
				// 				let useList = {
				// 					sub_price: res.data.list[i].sub_price,
				// 					min_price_desc: res.data.list[i].text,
				// 					begin_time: res.data.list[i].begin_time,
				// 					end_time: res.data.list[i].end_time,
				// 					title: res.data.list[i].begin_time,
				// 					image: '/static/newImg/weixuan.png',
				// 					user_coupon_id: res.data.list[i].id,
				// 				}
				// 				this.useList.push(useList)
				// 			}
				// 		}
				// 	}
					
				// });
			},
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				this.$emit('shiyongyouhui', e)
				this.xuanzhong = true
				// this.$Request.get(this.$api.user.cardList).then(res => {
				// 	////console.log('res---->',res)
				// 	for (let i = 0; i < res.data.list.length; i++) {
				// 		if (e.user_coupon_id == res.data.list[i].id) {
				// 			let str = res.data.list[i]
				// 			this.$emit('shiyongyouhui', str)
				// 			this.xuanzhong = true
				// 		}
				// 	}
				// });
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
			},
			//完成/返回
			toback() {
				// ////console.log('eeeee',this.$refs.cou_pop)
				// this.$refs.cou_pop.close();
				this.$parent.youhuiShow = false
				this.$emit('zhifuboxlist', 123456)
				if (this.xuanzhong == true) {
					this.$emit('xuanzongyh', true)
				}else{
					this.$emit('shiyongyouhui',{})
				}
			},
			//是否使用优惠券
			changeState() {
				this.show = !this.show
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pop_wrap {
		width: 100%;
		height: 1080rpx;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding: 64rpx 0;
		position: relative;

		.pop_box {
			width: 670rpx;
			margin: 0 auto;

			.top {
				display: flex;

				.img {
					width: 21rpx;
					height: 37rpx;
				}

				.icon {
					justify-content: flex-end;
					margin-left: auto;
					width: 45rpx;
					height: 45rpx;
				}
			}

			.border {
				height: 14rpx;
				margin: 30rpx 0 50rpx;

				image {
					width: 670rpx;
					height: 14rpx;
				}
			}
			
			.but_box {
				width: 100%;
				height: 200rpx;
				// background-image: url('/static/newImg/butBg.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				position: absolute;
				left: 0;
				bottom: 0;
				display: flex;
				justify-content: space-between;
				z-index: 300;
				padding: 30rpx 40rpx 0;
			
				.change {
					width: 281rpx;
					height: 107rpx;
					margin-top: 40rpx;
				}
			
				.open {
					width: 360rpx;
					height: 106rpx;
					margin-top: 40rpx;
				}
			
				.openNew {
					margin: 0 auto;
					margin-top: 36rpx;
					color: #ffffff;
					width: 361rpx;
					height: 90rpx;
					background: linear-gradient(0deg, #1B85FC, #4DC5FC);
					border-radius: 10rpx;
				}
			}



			.swiper_box {
				height: 800rpx;
				overflow-y: auto;
				padding-bottom: 120rpx;

				.pop_center {
					
					.pop_title{
						color: #ffffff;
						font-size: 30rpx;
						margin-top: 60rpx;
					}

					.pop_item {
						display: flex;
						align-items: center;
						width: 670rpx;
						height: 188rpx;
						background: linear-gradient(90deg, #5B8EE4, #3D74D1);
						border: 3rpx solid #2DE4DC;
						border-radius: 10rpx;
						padding: 30rpx;
						margin: 30rpx 0;

						.item_box {
							.top {
								height: 41rpx;
								display: flex;
								align-items: center;

								.money {
									font-size: 54rpx;
									font-weight: bold;
									color: #3AEBE9;
									margin-right: 60rpx;
								}

								.use {
									width: 211rpx;
									height: 41rpx;
									font-size: 30rpx;
									font-weight: bold;
									color: #FFFFFF;
									margin-bottom: 10rpx;
									
									&:nth-child(2){
										font-size: 22rpx;
										font-weight: 400;
									}
								}
							}

							.time {
								width: 507rpx;
								height: 18rpx;
								font-size: 22rpx;
								font-weight: 400;
								color: #FFFFFF;
								margin-top: 40rpx;
							}

						}

						image {
							width: 33rpx;
							height: 33rpx;
							justify-content: flex-end;
							margin-left: auto;
						}

					}
				}


				
			}
		}


		.empty_box {
			width: 200rpx;
			height: 100rpx;
			line-height: 600rpx;
			font-size: 30rpx;
			margin: auto;
			color:#ffffff;
		}




	}
</style>
